<template>
	<view class="coupon-page">
		<!-- Tab 导航栏（固定在顶部） -->
		<!-- <view class="tab-bar fixed-top"> -->
		<view class="tabcenter">
			<u-tabs :list="list1" @click="click"></u-tabs>
		</view>

		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 可使用 Tab 内容 -->
			<view class="tab-content" v-if="currentTab === 0">
				<view class="available-coupon">
					<!-- 提醒提示栏 -->
					<view class="remind-bar">
						<text class="remind-text">开启优惠券相关提醒，掌握一手优惠信息</text>
						<button class="remind-btn">开启提醒</button>
					</view>
					<!-- 有可使用优惠券时展示列表 -->
					<view class="coupon-list" v-if="availableCoupons.length > 0">
						<view class="coupon-item" v-for="(coupon, index) in availableCoupons" :key="index">
							<image class="coupon-img" :src="coupon.coupons.url_text" mode="widthFix"></image>
							<view class="coupon-info">
								<text class="coupon-title">{{ coupon.coupons.name }}</text>
								<text class="coupon-desc">有效期至 2024-06-05 23:59:59</text>
								<text class="coupon-rule">{{ coupon.coupons.coupon_rule }}</text>
							</view>
						</view>
						<view class="no-more" v-if="invalidCoupons"></view>
					</view>
					<!-- 无优惠券提示 -->
					<view class="empty-tip" v-else>
						<image class="empty-img" src="/static/empty-coupon.png" mode="widthFix"></image>
						<text class="empty-text">暂无优惠券</text>
					</view>
				</view>
			</view>

			<!-- 已使用 Tab 内容 -->
			<view class="tab-content" v-if="currentTab === 1">
				<view class="used-coupon">
					<view class="coupon-item" v-for="(coupon, index) in usedCoupons" :key="index">
						<image class="coupon-img" :src="coupon.coupons.url_text" mode="widthFix"></image>
						<view class="coupon-info">
							<text class="coupon-title">{{ coupon.coupons.name }}</text>
							<text class="coupon-desc">有效期至 2024-06-05 23:59:59</text>
							<text class="coupon-rule">{{ coupon.coupons.coupon_rule }}</text>
						</view>
					</view>
					<view class="no-more" v-if="usedCoupons">没有更多了~</view>
				</view>
			</view>

			<!-- 已失效 Tab 内容 -->
			<view class="tab-content" v-if="currentTab === 2">
				<view class="invalid-coupon">
					<view class="coupon-item" v-for="(coupon, index) in invalidCoupons" :key="index">
						<image class="coupon-img" :src="coupon.coupons.url_text" mode="widthFix"></image>
						<view class="coupon-info">
							<text class="coupon-title">{{ coupon.coupons.name }}</text>
							<text class="coupon-desc">有效期至 2024-06-05 23:59:59</text>
							<text class="coupon-price">{{ coupon.price }}</text>
							<text class="coupon-rule">{{ coupon.coupons.coupon_rule }}</text>
						</view>
					</view>
					<view class="no-more" v-if="invalidCoupons">没有更多了~</view>
				</view>
			</view>
		</view>

		<!-- 兑换优惠券底部栏 -->
		<view class="exchange-bar">
			<text class="exchange-icon"></text>
			<text class="exchange-text">兑换优惠券</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list1: [{
					name: '可使用',
				}, {
					name: '已使用',
				}, {
					name: '已失效'
				}],
				tabs: [{
						title: "可使用"
					},
					{
						title: "已使用"
					},
					{
						title: "已失效"
					},
				],
				currentTab: 0,
				// 新增可使用优惠券模拟数据
				availableCoupons: [],
				// 模拟已使用优惠券数据
				usedCoupons: [{
						img: "/static/used-coupon.png",
						title: "爆品买一送一券",
						desc: "有效期至 2024-06-05 23:59:59",
						rule: "部分门店、部分饮品、仅自取",
					},
					{
						img: "/static/used-coupon.png",
						title: "满200减50",
						desc: "有效期至 2024-05-20 23:59:59",
						rule: "全场通用，不与其他优惠同享",
					},
				],
				// 模拟已失效优惠券数据
				invalidCoupons: [{
						img: "/static/invalid-coupon.png",
						title: "爆款咖啡9.9元",
						desc: "有效期至 2025-06-20 23:59:59",
						price: "9.9元 喝一杯",
						rule: "部分门店、部分饮品、仅自取",
					},
					{
						img: "/static/invalid-coupon.png",
						title: "爆款咖啡9.9元",
						desc: "有效期至 2025-06-20 23:59:59",
						price: "9.9元 喝一杯",
						rule: "部分门店、部分饮品、仅自取",
					},
				],
			};
		},
		onLoad() {
			this.getUserReCoupon();
		},
		methods: {
			click(item) {
				this.currentTab = item.index;
				// 获取点击时的currentTab的值
				this.getUserReCoupon(this.currentTab);
			},
			// 定义获取用户已领取的优惠券方法
			async getUserReCoupon(status) {
				let tabStatus = this.currentTab
				// console.log(tabStatus)
				let result = await this.$u.api.coupon.receiveCoupon({
					'status': tabStatus
				});
				if (result.code == 1) {
					let couponData = result.data
					// 每次点击要重新清空
					this.availableCoupons = []
					this.usedCoupons = []
					this.invalidCoupons = []
					if (tabStatus == 0) {
						couponData.forEach(item => {
							// console.log(item)
							this.availableCoupons.push(item)
						})
					}
					if (tabStatus == 1) {
						couponData.forEach(item => {
							// console.log(item)
							this.usedCoupons.push(item)
						})
					}
					if (tabStatus == 2) {
						couponData.forEach(item => {
							// console.log(item)
							this.invalidCoupons.push(item)
						})
					}


					console.log(this.availableCoupons)
					// this.availableCoupons.push(...result.data)
					// console.log(this.availableCoupons)
				}
			}
		},
	};
</script>

<style scoped>
	.tabcenter {
		margin: 0 auto;
	}

	.tab-bar {
		justify-content: space-around
	}

	/* 页面整体样式 */
	.coupon-page {
		background-color: #fff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* Tab 导航栏样式（固定在顶部） */
	.tab-bar {
		display: flex;
		border-bottom: 1px solid #eee;
		background-color: #fff;
		z-index: 100;
		height: 50px;
	}

	.fixed-top {
		position: fixed;
		top: 40px;
		/* 调整为顶边对齐，之前 top:30px 可能会有间隙，根据实际需求微调 */
		left: 0;
		right: 0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 15px 0;
		font-size: 16px;
		color: #999;
	}

	.tab-item.active {
		color: #000;
		font-weight: bold;
		border-bottom: 2px solid #000;
	}

	/* 内容区域包装器 */
	.content-wrapper {
		flex: 1;
		overflow-y: auto;
	}

	/* 各 Tab 内容通用样式 */
	.tab-content {
		padding: 15px;
		min-height: 100%;
		box-sizing: border-box;
	}

	/* 可使用 Tab 样式 */
	.available-coupon .remind-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fef8f1;
		/* padding: 10px; */
		border-radius: 4px;
		margin-bottom: 15px;
	}

	.remind-text {
		font-size: 12px;
		color: #666;
		margin-left: 15px;
	}

	.remind-btn {
		background-color: #fff;
		border: 1px solid #ff9900;
		color: #ff9900;
		padding: 6px 12px;
		border-radius: 4px;
		font-size: 12px;
	}

	/* 可使用优惠券列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.available-coupon .coupon-item {
		background-color: #f9f9f9;
		padding: 10px;
		border-radius: 8px;
		display: flex;
		align-items: center;
	}

	.available-coupon .coupon-img {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.available-coupon .coupon-info {
		flex: 1;
	}

	.available-coupon .coupon-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.available-coupon .coupon-desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 3px;
	}

	.available-coupon .coupon-rule {
		font-size: 13px;
		color: #999;
	}

	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
	}

	.empty-img {
		width: 120px;
		margin-bottom: 10px;
	}

	.empty-text {
		font-size: 15px;
		color: #999;
	}

	/* 已使用 Tab 样式 */
	.used-coupon .coupon-item {
		background-color: #f9f9f9;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.used-coupon .coupon-img {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.used-coupon .coupon-info {
		flex: 1;
	}

	.used-coupon .coupon-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.used-coupon .coupon-desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 3px;
	}

	.used-coupon .coupon-rule {
		font-size: 13px;
		color: #999;
	}

	.used-coupon .no-more {
		text-align: center;
		margin-top: 20px;
		color: #999;
	}

	/* 已失效 Tab 样式 */
	.invalid-coupon .coupon-item {
		background-color: #f9f9f9;
		padding: 10px;
		border-radius: 8px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.invalid-coupon .coupon-img {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.invalid-coupon .coupon-info {
		flex: 1;
	}

	.invalid-coupon .coupon-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.invalid-coupon .coupon-desc {
		font-size: 14px;
		color: #666;
		margin-bottom: 3px;
	}

	.invalid-coupon .coupon-price {
		font-size: 14px;
		color: #999;
		margin-bottom: 3px;
	}

	.invalid-coupon .coupon-rule {
		font-size: 13px;
		color: #999;
	}

	.invalid-coupon .no-more {
		text-align: center;
		margin-top: 20px;
		color: #999;
	}

	/* 兑换优惠券底部栏样式 */
	.exchange-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 45px;
		background-color: #fff;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.exchange-icon {
		width: 30px;
		height: 30px;
		background: url("/static/images/兑换优惠券50.png") no-repeat center;
		background-size: contain;
		margin-right: 5px;
	}

	.exchange-text {
		font-size: 15px;
		color: #333;
	}
</style>